/**
 * refactoring by zhouli on 2019/3/14.
 * 用户信息（右上角）
 */
import React from 'react';
import {connect} from 'react-redux';
import {Icon} from 'antd';
import {messages, removeToken} from 'share/common';
import configureStore from "stores";
import { setDocumentaryCompany } from "actions/login";
import UserMale from "images/user-male.png";
import UserFemale from "images/user-female.png";
import UserUnknow from 'images/user-unknow.png';
import menuRoute from 'routes/menuRoute';
import mainService from 'containers/main.service';
import 'styles/main/components/user-info.scss';

class UserInfo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userImg: {
        0: UserMale,
        1: UserFemale,
        2: UserUnknow
      },
      className: 'user-info-list hide'
    }
  }

  showList = () => {
    if (window.ISIE9) {
      this.setState({ className: 'user-info-list show' })
    } else {
      this.setState({ className: 'user-info-list slide-down-enter slide-down-enter-active' })
    }
  };

  hideList = () => {
    if (window.ISIE9) {
      this.setState({ className: 'user-info-list hide' });
    } else {
      this.setState({ className: 'user-info-list slide-up-leave slide-up-leave-active' });
      setTimeout(()=>{
        this.setState({ className: 'user-info-list hide' });
      }, 201)
    }
  };

  logout = () => {
    //清空documentaryCompany的redux信息
    configureStore.store.dispatch(setDocumentaryCompany({}));
    // 有了单点登录之后
    mainService.loginOutSso()
      .then((res) => {
        removeToken("language");
        this.context.router.push('/?logout_sso=true');
      })
  };

  goUrlByMenu = () => {
    this.props.menuRouterDeal(menuRoute.getMenuItemByAttr("personal-settings", 'key').url);
  };

  render() {
    const { userImg, className } = this.state;
    const { loginUser } = this.props;
    return (
      <div className="user-info"
           onMouseOver={this.showList}
           onMouseLeave={this.hideList}
      >
        <div className="user-avatar">
          <img src={loginUser.filePath ? loginUser.filePath : userImg[loginUser.gender]}/>
        </div>
        <div className="user-name">
          {loginUser.fullName}
        </div>
        <Icon type="down" className="arrow"/>
        <div className={className}>
          <ul className="user-info-box">
            {
              !loginUser.mock &&
              <li onClick={this.goUrlByMenu}>
                <span><Icon type="user"/></span>
                {messages('dashboard.key125')/*个人设置*/}
              </li>
            }
            {
              sessionStorage.getItem('hly.loginType') === 'privateSso' ||   sessionStorage.getItem('hly.loginType') === 'bossSso'?
                null:
                <li onClick={this.logout}>
                  <span><Icon type="poweroff"/></span>
                  {messages('dashboard.key126')/*退出登录*/}
                </li>
            }
          </ul>
        </div>
      </div>
    )
  }
}

UserInfo.propTypes = {
  loginUser: React.PropTypes.any,
  menuRouterDeal: React.PropTypes.any,
};

UserInfo.defaultProps = {};

UserInfo.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    language: state.main.language,
    tenant: state.login.tenant
  }
}

export default connect(mapStateToProps)(UserInfo);

